<template>
	<div id="app">
		<div class="page">
			<ul>
				<li v-for="item in 4" :key="item" @click="scoller(item)">
					<img :class="{'active':selectIndex===item}" src="../static/images/scal.svg" alt="">
				</li>
			</ul>
		</div>
		<div class="box" ref="box" :style="{marginTop:height+'px'}">
			<page1 :index="selectIndex"></page1>
			<page2 :index="selectIndex" :fshow="showpage2"></page2>
			<page3 :index="selectIndex" :fshow="show"></page3>
			<page4 :index="selectIndex"></page4>
		</div>
	</div>
</template>

<script>
	import page1 from './component/page1.vue'
	import page2 from './component/page2.vue'
	import page3 from './component/page3.vue'
	import page4 from './component/page4.vue'
	export default {
		data() {
			return {
				active: false,
				selectIndex: 1,
				height: 0,
				show: false, //page3的显示
				showpage2: false, //page2的显示
			}
		},
		methods: {
			scoller(index) {
				this.show = false
				this.showpage2 = false
				this.selectIndex = index
				var p = this.$refs.box.children[index - 1]
				//模块的高度
				this.height = p.offsetHeight * (-1) * (index - 1)
				if (index == 2) {
					this.showpage2 = !this.showpage2
				}
				if (index == 3) {
					this.show = !this.show
				}
			}
		},
		components: {
			page1,
			page2,
			page3,
			page4
		},

		created() {
			setTimeout(() => {
				window.L2Dwidget.init({
					pluginRootPath: 'static/live2dw/',
					pluginJsPath: 'lib/',
					pluginModelPath: 'live2d-widget-model-shizuku/assets/',
					tagMode: false,
					debug: false,
					model: {
						jsonPath: '/static/live2dw/live2d-widget-model-shizuku/assets/shizuku.model.json'
					},
					display: {
						position: 'left',
						width: 250,
						height: 400
					},
					mobile: {
						show: true
					},
					log: false
				})
			}, 1000)
		}
	}
</script>

<style>
	* {
		list-style: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	.page {
		position: fixed;
		right: 50px;
		top: 50%;
		z-index: 9999;
	}

	.page>ul>li {
		margin-top: 15px;
	}

	.page>ul>li>.active {
		border-radius: 50%;
		background-color: white;
	}

	.box {
		position: relative;
	}

	.p {
		width: 100vw;
		height: 100vh;
	}
</style>
